<template>
  <div class="home">
    <div class="left">
      <el-menu
        router
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <TreeMenu :tree_data="treeData" />
      </el-menu>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import treeData from "../mock/index.json";
import TreeMenu from "../components/TreeMenu.vue";
export default {
  data() {
    return {
      treeData
    };
  },
  components: {
    TreeMenu
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style  scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
}
.left {
  width: 200px;
}
.left ul {
  height: 100%;
}
.right {
  flex: 1;
}
</style>